<!DOCTYPE html>
<html lang="en">
<<<<<<< HEAD

=======
>>>>>>> 50d972bf66ae40f6c85d4b5c9260338daae433ae
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<<<<<<< HEAD
    <style type="text/css">
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        blockquote,
        th,
        td,
        p {
            margin: 0;
            padding: 0
        }

        input,
        button,
        select,
        textarea,
        a:fouse {
            outline: none
        }

        li {
            list-style: none;
        }

        img {
            border: none;
        }

        textarea {
            resize: none;
        }

        body {
            margin: 0;
            font: 12px "微软雅黑";
            background: rgb(255, 236, 212);
        }

        body {
            min-width: 1000px;
        }

        a {

            text-decoration: none;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .clearfix {
            *zoom: 1;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
            position: relative;
        }

        .main2 {
            background: url("./img/main2.png") no-repeat center;
            height: 689px;
        }

        .main3-text {

            color: #744b00;

            font-size: 23px;

            font-weight: bold;

            position: absolute;

            left: 74px;

            top: 210px;

        }

        .main3-text2 {

            color: #744b00;

            font-size: 14px;

            position: absolute;

            left: 74px;

            top: 254px;

            line-height: 22px;

            width: 867px;

        }

        .main-text {

            position: absolute;

            left: 360px;
            top: 325px;
            color: #b03b01;

            font-size: 16px;

        }

        .main2-text1 {
            position: absolute;

            left: 79px;

            top: 45px;

            color: #ffffff;
            font-size: 16px;
        }

        .main2-text2 {

            position: absolute;

            left: 69px;

            top: 67px;

            color: #ffffff;

            font-size: 23px;

            font-weight: bold;

        }

        .main2-text2 span {
            color: #ffff00;
        }

        .main2-text3 {
            position: absolute;
            left: 69px;
            top: 97px;
            color: #ffffff;
            font-size: 18px;
        }

        .main2-text4 {
            position: absolute;
            left: 382px;
            top: 34px;
            color: #ffffff;
            font-size: 18px;
        }

        .main2-text4 span {
            color: #ffe700;
            font-weight: bold;
        }

        .main2-text5 {
            position: absolute;
            left: 665px;
            top: 34px;
            color: #ffffff;
            font-size: 18px;
        }

        .main2-text5 span {
            color: #ffe700;
            font-weight: bold;
        }

        .num {
            position: absolute;
            left: 248px;
            top: 171px;
            width: 124px;
            height: 198px;
            overflow: hidden;
        }

        .num-con {
            position: relative;
            top: -430px;
        }

        .num-img {
            background: url("./img/num.png") no-repeat;
            width: 124px;
            height: 1298px;
            margin-bottom: 4px;
        }

        .num2 {
            left: 399px;
        }

        .num3 {
            left: 551px;
        }

        .main3-btn {
            width: 307px;
            height: 95px;
            position: absolute;
            left: 300px;
            top: 400px;
            cursor: pointer;
            /* border: 1px solid black; */
        }
    </style>
</head>

<body>
    <div class="main2">
        <div class="container">
            <div class="num num1">
                <div class="num-con num-con1" style="top: -430px;">
                    <div class="num-img"></div>
                    <div class="num-img"></div>
                </div>
            </div>
            <div class="num num2">
                <div class="num-con num-con2" style="top: -430px;">
                    <div class="num-img"></div>
                    <div class="num-img"></div>
                </div>
            </div>
            <div class="num num3">
                <div class="num-con num-con3" style="top: -430px;">
                    <div class="num-img"></div>
                    <div class="num-img"></div>
                </div>
            </div>

        </div>
        <div class="main3">
            <div class="container">
                <div class="main3-btn">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>
    $('.main3-btn').click(function () {
        var that = $(this);
        that.removeClass('main3-btn')
        var tNum1 = parseInt(Math.random() * 4)//随机数
        var tNum2 = parseInt(Math.random() * 7)
        var tNum3 = parseInt(Math.random() * 7)
        var num1 = [-549, -668, -786, -904][tNum1];//在这里随机
        var num2 = [-1377, -1495, -1614, -430, -549, -668, -786, -904][tNum2];
        var num3 = [-1377, -1495, -1614, -430, -549, -668, -786, -904][tNum3];

        $(".num-con1").animate({ "top": -1140 }, 1000, "linear", function () {
            $(this).css("top", 0).animate({ "top": num1 }, 1000, "linear");
        });

        $(".num-con2").animate({ "top": -1140 }, 1000, "linear", function () {
            $(this).css("top", 0).animate({ "top": num2 }, 1800, "linear");
        });

        $(".num-con3").animate({ "top": -1140 }, 1000, "linear", function () {
            $(this).css("top", 0).animate({ "top": num3 }, 1300, "linear");
        });
        setTimeout(() => {
            that.addClass('main3-btn')
        }, 2000)
    })
</script>

=======
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <button>点击</button>
    <!-- <div class="box">
        <h2>提示</h2>
        <div class="foot">
            <p>
                提示内容
            </p>
            <button class="qv">取消</button>
            <button class="que">确认</button>
        </div>
    </div> -->
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/index.js"></script>
    <script>
        // $('body').tan('友情提示','错了')
        $('button').click(function(){
            var rs=$('body').tan('阿鲁即可','哦i肺癌日文去容器俄军入侵为日后分散开')
        })
    </script>
</body>
>>>>>>> 50d972bf66ae40f6c85d4b5c9260338daae433ae
</html>